<script setup lang="ts">
import {ref,computed} from 'vue'
import {$updateFranchise, $updateHotelExam, $updateRoomTypeExam} from "../../api/exam.ts";
import {ElNotification, type FormInstance} from "element-plus";

const formLabelWidth = '140px'
const examDialog = ref(false)
const examDialog1 = ref(false)
const examDialog2 = ref(false)
const formRef = ref<FormInstance>()
const formRef1 = ref<FormInstance>()
const formRef2 = ref<FormInstance>()
const formData = ref({
  id: '',
  auditStatus: '',
  auditDetail: '',
  hotelName: '',
  legalName: '',
  hotelLegalContext: '',
  contract: ''
})
const formData1 = ref({
  id: '',
  auditStatus: '',
  auditDetail: '',
  hotelName: '',
  hotelContext: '',
  hotelPhone: '',
  hotelImg: ''
})
const formData2 = ref({
  id: '',
  auditStatus: '',
  auditDetail: '',
  hotelName: '',
  roomType:'',
  roomImage:'',
  price:''
})
defineExpose({
      examDialog,
      examDialog1,
      examDialog2,
      formData,
      formData1,
      formData2
    }
)
// 加盟审核
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return

  formEl.validate(async (valid) => {

    if (valid) {

      let ret = await $updateFranchise(formData.value)
      if (ret.code === 2001) {
        ElNotification({
          title: '成功！',
          message: '审核更新成功！',
          type: 'success',
        })
        // examDialog1.value = false
      } else {
        ElNotification({
          title: '失败',
          message: '请联系管理员',
          type: 'error',
        })
      }
    } else {
      console.log('error submit!')
    }
  })
}
// 酒店审核
const submitForm1 = (formEl: FormInstance | undefined) => {
  if (!formEl) return

  formEl.validate(async (valid) => {

    if (valid) {

      let ret = await $updateHotelExam(formData1.value)
      if (ret.code === 2001) {
        ElNotification({
          title: '成功！',
          message: '审核更新成功！',
          type: 'success',
        })
        // examDialog1.value = false
      } else {
        ElNotification({
          title: '失败',
          message: '请联系管理员',
          type: 'error',
        })
      }
    } else {
      console.log('error submit!')
    }
  })
}
// 房型审核
const submitForm2 = (formEl: FormInstance | undefined) => {
  if (!formEl) return

  formEl.validate(async (valid) => {

    if (valid) {

      let ret = await $updateRoomTypeExam(formData2.value)
      if (ret.code === 2001) {
        ElNotification({
          title: '成功！',
          message: '审核更新成功！',
          type: 'success',
        })
        // examDialog1.value = false
      } else {
        ElNotification({
          title: '失败',
          message: '请联系管理员',
          type: 'error',
        })
      }
    } else {
      console.log('error submit!')
    }
  })
}

// 定义一个计算属性来解析 hotelImg 字符串
const parsedHotelImgs = computed(() => {
  if (formData1.value.hotelImg) {
    if (formData1.value.hotelImg.includes(';')) {
      return formData1.value.hotelImg.split(';').map(url => url.trim());
    } else {
      return [formData1.value.hotelImg.trim()];
    }
  }
  return [];
});

const parsedHotelImgs2 = computed(() => {
  if (formData2.value.roomImage) {
    if (formData2.value.roomImage.includes(';')) {
      return formData2.value.roomImage.split(';').map(url => url.trim());
    } else {
      return [formData2.value.roomImage.trim()];
    }
  }
  return [];
});
</script>

<template>
  <!--  加盟审核-->
  <el-dialog
      v-model="examDialog"
      title="审核"
      width="800"
      center
  >
    <!--审核信息-->
    <el-row justify="center" style="margin-bottom: 20px">
      <p>酒店名称：{{ formData.hotelName }}</p>
    </el-row>
    <el-row justify="center" style="margin-bottom: 20px">
      <p>法人：{{ formData.legalName }}</p>
    </el-row>
    <el-row justify="center" style="margin-bottom: 20px">
      <p>法人电话：{{ formData.hotelLegalContext }}</p>
    </el-row>
    <el-row justify="center" style="margin-bottom: 20px">
      <el-card style="width: 480px">
        <template #header>
          <div class="card-header">
            <span>合同文件</span>
          </div>
        </template>
        <a
            class="link item"
            :href="formData.contract"
            target="_blank"
        >
          合同文件
        </a>
      </el-card>
    </el-row>
    <el-row justify="center">
      <!--审核操作-->
      <el-form ref="formRef" :model="formData">
        <el-form-item label="审核状态" :label-width="formLabelWidth">
          <el-select
              v-model="formData.auditStatus"
              style="width: 240px"
              placeholder="请选择审核结果"
          >
            <el-option label="已通过" value="已通过"/>
            <el-option label="未通过" value="未通过"/>
          </el-select>
        </el-form-item>
        <el-form-item label="审核情况" :label-width="formLabelWidth">
          <el-input
              v-model="formData.auditDetail"
              style="width: 240px"
              maxlength="200"
              show-word-limit
              type="textarea"
              placeholder="选填，通过默认信息为通过，未通过请简述原因"
          />
        </el-form-item>
      </el-form>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="examDialog = false">取消</el-button>
        <el-button type="primary" @click="submitForm(formRef) ">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--  酒店图片审核-->
  <el-dialog
      v-model="examDialog1"
      title="审核"
      width="800"
      center
  >
    <!--审核信息-->
    <el-row justify="center" style="margin-bottom: 20px">
      <p>酒店名称：{{ formData1.hotelName }}</p>
    </el-row>
    <el-row justify="center" style="margin-bottom: 20px">
      <p>酒店联系人：{{ formData1.hotelContext }}</p>
    </el-row>
    <el-row justify="center" style="margin-bottom: 20px">
      <p>联系人电话：{{ formData1.hotelPhone }}</p>
    </el-row>
    <el-row justify="center" style="margin-bottom: 20px">
      <el-card style="width: 480px">
        <template #header>
          <div class="card-header">
            <span>图片信息</span>
          </div>
        </template>
        <div v-for="(imgUrl, index) in parsedHotelImgs" :key="index" style="margin-bottom: 10px">
          <img :src="imgUrl" alt="酒店图片" style="width: 100%; max-height: 200px; object-fit: cover;" />
        </div>
      </el-card>
    </el-row>
    <el-row justify="center">
      <!--审核操作-->
      <el-form ref="formRef1" :model="formData1">
        <el-form-item label="审核状态" :label-width="formLabelWidth">
          <el-select
              v-model="formData1.auditStatus"
              style="width: 240px"
              placeholder="请选择审核结果"
          >
            <el-option label="已通过" value="已通过"/>
            <el-option label="未通过" value="未通过"/>
          </el-select>
        </el-form-item>
        <el-form-item label="审核情况" :label-width="formLabelWidth">
          <el-input
              v-model="formData1.auditDetail"
              style="width: 240px"
              maxlength="200"
              show-word-limit
              type="textarea"
              placeholder="选填，通过默认信息为通过，未通过请简述原因"
          />
        </el-form-item>
      </el-form>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="examDialog1 = false">取消</el-button>
        <el-button type="primary" @click="submitForm1(formRef1)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--  房型图片审核-->
  <el-dialog
      v-model="examDialog2"
      title="房型审核"
      width="800"
      center
  >
    <!--审核信息-->
    <el-row justify="center" style="margin-bottom: 20px">
      <p>酒店名称：{{ formData2.hotelName }}</p>
    </el-row>
    <el-row justify="center" style="margin-bottom: 20px">
      <p>房间类型：{{ formData2.roomType }}</p>
    </el-row>
    <el-row justify="center" style="margin-bottom: 20px">
      <el-card style="width: 480px">
        <template #header>
          <div class="card-header">
            <span>图片信息</span>
          </div>
        </template>
        <div v-for="(imgUrl, index) in parsedHotelImgs2" :key="index" style="margin-bottom: 10px">
          <img :src="imgUrl" alt="酒店图片" style="width: 100%; max-height: 200px; object-fit: cover;" />
        </div>
      </el-card>
    </el-row>
    <el-row justify="center">
      <!--审核操作-->
      <el-form ref="formRef2" :model="formData2">
        <el-form-item label="审核状态" :label-width="formLabelWidth">
          <el-select
              v-model="formData2.auditStatus"
              style="width: 240px"
              placeholder="请选择审核结果"
          >
            <el-option label="已通过" value="已通过"/>
            <el-option label="未通过" value="未通过"/>
          </el-select>
        </el-form-item>
        <el-form-item label="审核情况" :label-width="formLabelWidth">
          <el-input
              v-model="formData2.auditDetail"
              style="width: 240px"
              maxlength="200"
              show-word-limit
              type="textarea"
              placeholder="选填，通过默认信息为通过，未通过请简述原因"
          />
        </el-form-item>
      </el-form>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="examDialog2= false">取消</el-button>
        <el-button type="primary" @click="submitForm2(formRef2)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
p {
  line-height: 22px;
}
</style>